<template>
  <div class="app-container" style="height: 100%;background-color: rgb(244 244 244)">
    <el-row :gutter="30" style="height: calc(87vh - 5px)">
      <el-col :span="6" style="height: 100%;">
        <!--        监控类型筛选-->
        <el-row class="box box-top" style="height: 15%;overflow-y: hidden">
          <div class="s-title">
            <div>监控类型筛选:</div>
            <div class="s-ahref" @click="openTypeManage" v-hasPermi="['server:supervisory:typeManage']">类型管理</div>
          </div>
          <div class="dotC">
            <div :class="choiceType=='全部'?'divRClick':'divR'" @click="changeRadiobox('全部')">全部</div>
            <div :class="choiceType==item.dictLabel?'divRClick':'divR'" v-for="(item,index) in typeOptions" :key="index"
                 @click="changeRadiobox(item)">{{item.dictLabel}}
            </div>
          </div>
        </el-row>
        <!--        监控点位列表-->
        <el-row class="box" style="height: 80%;overflow-y: auto">
          <div class="s-title">
            <div>监控点位列表:</div>
            <div class="s-ahref" @click="handleAdd" v-hasPermi="['server:supervisory:add']">新增点位</div>
          </div>
          <el-table
            v-loading="loading"
            :data="supervisoryList"
            style="width: 100%">
            <el-table-column prop="supervisoryPt" label="点位名称" width="180">
              <template slot-scope="scope">
                <span class="s-ahref" @click="showMonitor(scope.row)">{{scope.row.supervisoryPt}}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column prop="openSwitch" label="是否显示" align="center" width="180">-->
            <!--              <template slot-scope="scope">-->
            <!--                <el-switch v-model="scope.row.openSwitch" @change="showMonitor(scope.row)">-->
            <!--                </el-switch>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column align="center" label="操作">
              <template slot-scope="scope,text,record">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleEdit(scope.row)"
                  v-hasPermi="['server:supervisory:edit']">编辑
                </el-button>
                <el-popconfirm
                  title="是否确认删除?" @confirm="handleDelete(scope.row)" v-hasPermi="['server:supervisory:remove']">
                  <span slot="reference"
                        style="color:red;cursor: pointer;font-size: 10px;margin-left: 10px;">删除</span>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!--          <pagination-->
          <!--            v-show="total>0"-->
          <!--            :total="total"-->
          <!--            :page.sync="queryParams.pageNum"-->
          <!--            :limit.sync="queryParams.pageSize"-->
          <!--            @pagination="getList"-->
          <!--          />-->
        </el-row>
      </el-col>
      <el-col :span="18" style="height: 100%;">
        <!--        展示-->
        <el-row class="box box-top"
                style="height: 83%;width:100%;display: flex;padding-bottom: 30px;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
          <div v-for="(item,index) in monitorList" :key="index" :style="handleSplitCss()">
            <vedio-hls-player
              style="width: 100%;height:100%"
              :src="'http://101.206.123.213:7086/live/cameraid/'+item.supervisoryId+'%240/substream/1.m3u8'"
              :hlsKey="index">
            </vedio-hls-player>
            <div style="text-align: center;width: 100%;">{{item.supervisoryPt}}</div>
          </div>
        </el-row>
        <!--        操作台-->
        <el-row class="box" style="height: 12%;padding: 0px;display: flex;align-items: center;">
          <div class="split_image" @click="handleSplit('一分屏')">
            <img v-if="splitType!='一分屏'&&splitType!=''" src="@/assets/images/one.png" style="width: 100%;height: 100%">
            <img v-else src="@/assets/images/oneActive.png" style="width: 100%;height: 100%">
            <div class="split_font">一分屏</div>
          </div>
          <div class="split_image" @click="handleSplit('二分屏')">
            <img v-if="splitType!='二分屏'" src="@/assets/images/two.png" style="width: 100%;height: 100%">
            <img v-else src="@/assets/images/twoActive.png" style="width: 100%;height: 100%">
            <div class="split_font">二分屏</div>
          </div>
          <div class="split_image" @click="handleSplit('四分屏')">
            <img v-if="splitType!='四分屏'" src="@/assets/images/four.png" style="width: 100%;height: 100%">
            <img v-else src="@/assets/images/fourActive.png" style="width: 100%;height: 100%">
            <div class="split_font">四分屏</div>
          </div>
          <div class="split_image" @click="handleSplit('九分屏')">
            <img v-if="splitType!='九分屏'" src="@/assets/images/nine.png" style="width: 100%;height: 100%">
            <img v-else src="@/assets/images/nineActive.png" style="width: 100%;height: 100%">
            <div class="split_font">九分屏</div>
          </div>
        </el-row>
      </el-col>
    </el-row>

    <!-- 添加或修改园区监控信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="监控名称" prop="supervisoryName" label-width="80px">
          <el-select v-model="form.supervisoryName" placeholder="请选择监控名称" style="width: 100%" @change="changeFromId">
            <el-option
              v-for="(item,index) in dotList"
              :key="index"
              :label="item.assetsName"
              :value="item.assetsName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监控位置" prop="supervisoryPosition" label-width="80px">
          <el-input v-model="form.supervisoryPosition" placeholder="请输入监控位置"/>
        </el-form-item>
        <el-form-item label="监控点位" prop="supervisoryPt" label-width="80px">
          <el-input v-model="form.supervisoryPt" placeholder="请输入监控点位"/>
        </el-form-item>
        <el-form-item label="监控类型" prop="supervisoryType" label-width="80px">
          <el-select v-model="form.supervisoryType" placeholder="请选择监控类型" style="width: 100%;">
            <el-option
              v-for="(dict,index) in typeOptions"
              :key="index"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监控状态" prop="supervisoryStatus" label-width="80px">
          <el-select v-model="form.supervisoryStatus" placeholder="请选择监控状态" style="width: 100%;" disabled>
            <el-option
              v-for="(dict,index) in statusOptions"
              :key="index"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark" label-width="80px">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" maxlength="301"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="disabled">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listSupervisory,
    delSupervisory,
    addSupervisory,
    updateSupervisory,
    queryAllMonitorInfos,
    exportSupervisory
  } from '@/api/server/garden/supervisory'
  import flvjs from "clipboard/dist/clipboard";
  import vedioHlsPlayer from "@/views/components/VedioHlsPlayer";
  import vedioPlayer from "@/views/components/VedioPlayer";


  export default {
    components: {
      vedioHlsPlayer,
      vedioPlayer
    },
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          supervisoryName: null,
          supervisoryPosition: null,
          supervisoryPt: null,
          //监控类型
          supervisoryType: null,
          supervisoryStatus: null
        },
        // 总条数
        total: 0,
        // 园区监控信息表格数据
        supervisoryList: [],
        // 遮罩层
        loading: true,
        // 表单参数
        form: {},
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: '',
        // 表单校验
        rules: {
          supervisoryName: [
            {required: true, message: '监控名称不能为空', trigger: 'blur'},
            {validator: this.validateSupervisoryName, trigger: 'blur'}
          ],
          supervisoryPosition: [
            {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
          ],
          supervisoryStatus: [
            {required: true, message: '监控状态不能为空', trigger: 'blur'},
          ],
          supervisoryType: [
            {required: true, message: '监控类型不能为空', trigger: 'blur'},
          ],
          supervisoryPt: [
            {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'},
            // {validator: this.validateSupervisoryPt, trigger: 'blur'}
          ],
          remark: [
            {max: 300, message: '最大长度在300 个字符', trigger: 'change'},
          ]
        },
        //点位信息
        dotList: [],
        //类型字典
        typeOptions: [],
        //状态
        statusOptions: [],
        //禁止按钮重复点击
        disabled: false,
        //监控展示列表
        monitorList: [],
        //操作类型
        operatType: 'insert',
        //选中监控类型
        choiceType: '',
        //分屏形式
        splitType: '一分屏'
      }
    },
    watch: {
      splitType: {
        handler(val, oldVal) {
          this.showMonitor()
        },
        deep: true //true 深度监听
      }
    },
    mounted() {
      this.getList()
      this.getDicts("t_supervisory_type").then(Response => {
        this.typeOptions = Response.data
      })
      this.getDicts("t_supervisory_status").then(Response => {
        this.statusOptions = Response.data
      })

      queryAllMonitorInfos().then(Response => {
        this.dotList = Response.data
      })
    },
    methods: {
      //点位信息
      changeFromId(data) {
        let obj = this.dotList.find(item => {
          return item.assetsName == data
        })
        this.form.supervisoryId = obj.id
        this.form.supervisoryStatus = obj.assetsStatus
        this.form.supervisoryPosition = data
        this.form.supervisoryPt = data
      },
      //打开类型管理
      openTypeManage() {
        this.$router.push({
          path: '/system/dict',
          query: {
            param: "监控类型"
          }
        })
      },
      //验证监控名称查重
      validateSupervisoryName(rule, value, callback) {
        if (this.supervisoryList.some(item => {
          return item.supervisoryName == value
        })) {
          callback(new Error("监控名称已被选择,请重新选择"))
        } else {
          callback();
        }
      },
      //验证点位名称查重
      validateSupervisoryPt(rule, value, callback) {
        if (this.supervisoryList.some(item => {
          return item.supervisoryPt == value
        })) {
          callback(new Error("点位名称重复,请重新输入"))
        } else {
          callback();
        }
      },
      /** 查询园区监控信息列表 */
      getList() {
        this.loading = true
        listSupervisory(this.queryParams).then(response => {
          if (response.code == 200) {
            let arr = response.rows
            arr.forEach(item => {
              item.openSwitch = false
            })
            this.supervisoryList = arr
            this.total = response.total
            this.loading = false
          }
        })
      },
      //复选条件触发事件
      changeRadiobox(data) {
        if (data == "全部") {
          this.choiceType = data
          this.queryParams.supervisoryType = null
        } else {
          this.choiceType = data.dictLabel
          this.queryParams.supervisoryType = data.dictValue
        }
        this.getList()
      },
      //展示
      showMonitor(data) {
        //再次点击取消播放
        if (data!=null&&typeof data!='undefined') {
          let index = this.monitorList.findIndex(vo => {
            return vo.supervisoryName == data.supervisoryName
          })
          if(index>-1){
            this.monitorList.splice(index, 1)
            return
          }
        }
        this.$nextTick(() => {
          if (this.splitType == '一分屏' || this.splitType == '') {
            //一分屏
            this.judge(1, data)
          } else if (this.splitType == '二分屏') {
            //二分屏
            this.judge(2, data)
          } else if (this.splitType == '四分屏') {
            //四分屏
            this.judge(4, data)
          } else if (this.splitType == '九分屏') {
            //九分屏
            this.judge(9, data)
          }
        })
      },
      judge(num,  data) {
        if (this.monitorList.length >= num) {
          this.monitorList = this.monitorList.slice(0, num)
          if (data!=null&&typeof data!='undefined') {
            this.monitorList.pop()
          }
        }

        if (data!=null&&typeof data!='undefined') {
          this.monitorList.push(data)
        }
      },
      ///新增
      handleAdd() {
        this.operatType = 'insert'
        this.form = {}
        this.open = true
        this.title = '添加园区监控信息'
        this.supervisoryList.forEach(item => {
          let obj = this.dotList.find(vo => {
            return item.supervisoryName == vo.assetsName
          })
          if (obj != null && typeof obj != 'undefined') {
            this.dotList.splice(obj, 1)
          }
        })
      },
      //编辑绑定
      handleEdit(data) {
        this.operatType = 'update'
        this.open = true
        this.form = JSON.parse(JSON.stringify(data))
        this.title = '修改园区监控信息'
      },
      //删除点位
      handleDelete(data) {
        delSupervisory(data.supervisoryId).then(() => {
          this.getList()
          this.$message.success("删除成功")
        })
      },
      //确认
      submitForm() {
        this.disabled = true
        this.$refs['form'].validate(valid => {
            if (valid) {
              if (this.operatType == 'update') {
                updateSupervisory(this.form).then(response => {
                  this.msgSuccess('修改成功')
                  this.open = false
                  this.getList()
                  this.disabled = false
                })
              } else if (this.operatType == 'insert') {
                addSupervisory(this.form).then(response => {
                  this.msgSuccess('新增成功')
                  this.open = false
                  this.getList()
                  this.disabled = false
                })

              }
            } else {
              this.disabled = false
            }
          }
        )
      },
      //取消
      cancel() {
        this.$refs.form.resetFields();
        this.form = {}
        this.open = false
      },
      //分屏操作
      handleSplit(text) {
        if (this.splitType == text) {
          this.splitType = ''
        } else {
          this.splitType = text
        }
      },
      //分屏样式
      handleSplitCss() {
        let obj = {}
        if (this.splitType == '一分屏' || this.splitType == '') {
          //一分屏
          obj.width = '100%'
          obj.height = '100%'
        } else if (this.splitType == '二分屏') {
          //二分屏
          obj.width = '45%'
          obj.height = '90%'
          obj.marginLeft = '3%'
        } else if (this.splitType == '四分屏') {
          //四分屏
          obj.width = '45%'
          obj.height = '45%'
          obj.marginLeft = '3%'
        } else if (this.splitType == '九分屏') {
          //九分屏
          obj.width = '30%'
          obj.height = '30%'
          obj.marginLeft = '3%'
        }
        return obj
      }
    }
  }
</script>

<style>
  .s-title {
    display: flex;
    justify-content: space-between;
  }

  .s-ahref {
    font-size: small;
    color: #1890FF;
    cursor: pointer
  }

  .box {
    background-color: white;
    margin: 30px 0px;
    padding: 10px 30px;
  }

  .box-top {
    margin-top: 0px
  }
</style>
<style scoped>
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .el-table >>> .el-table__header-wrapper th, .el-table .el-table__fixed-header- {
    background-color: white;
  }

  >>> .el-radio--small.is-bordered .el-radio__inner {
    display: none;
  }

  >>> .el-radio.is-bordered.is-checked {
    background-color: #409eff;
    border-color: #409eff;
  }

  >>> .el-radio__input.is-checked + .el-radio__label {
    color: white;
    background-color: #409eff;

  }

  .divR {
    width: 28%;
    margin-left: 10px;
    border: 1px solid #DCDFE6;
    border-radius: 2px;
    height: 32px;
    text-align: center;
    font-size: 12px;
    line-height: 32px;
    color: #666;
    cursor: pointer;
  }

  .divRClick {
    width: 28%;
    margin-left: 10px;
    margin-top: 8px;
    border: 1px solid #1890ff;
    border-radius: 2px;
    height: 32px;
    text-align: center;
    font-size: 12px;
    line-height: 32px;
    color: #fff;
    cursor: pointer;
    background-color: #1890ff;
  }

  .dotC {
    display: flex;
    height: 80px;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 5px;
    margin-top: 5px;
  }

  .split_font {
    font-size: 12px;
    text-align: center;
    color: #666;
  }

  .split_image {
    height: 50px;
    width: 50px;
    margin-left: 20px;
    cursor: pointer
  }
</style>

